<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>生产管理</el-breadcrumb-item>
      <el-breadcrumb-item>生产订单</el-breadcrumb-item>
      <el-breadcrumb-item>创建生产计划</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 订单信息 -->
    <el-card>
      <h3>订单信息</h3>
      <el-row>
        <el-col :span="12">生产订单编号: GD20231002101</el-col>
        <el-col :span="12">客户名称: 广汇商贸</el-col>
        <el-col :span="12">销售单号: PO20170725022</el-col>
        <el-col :span="12">订单来源: 系统新增</el-col>
        <el-col :span="12">交付日期: 2020/09/06</el-col>
        <el-col :span="12">备注: -</el-col>
        <el-col :span="12">创建时间: 2020/09/01 10:40</el-col>
        <el-col :span="12">创建人: 林数儿</el-col>
        <el-col :span="12">最后更新时间: 2020/09/01 10:40</el-col>
        <el-col :span="12">更新人: 林数儿</el-col>
      </el-row>
    </el-card>

    <!-- 产品信息 -->
    <el-card>
      <h3>产品信息</h3>
      <el-table :data="products" style="width: 100%">
        <el-table-column prop="spec" label="规格"></el-table-column>
        <el-table-column prop="unit" label="计量单位"></el-table-column>
        <el-table-column prop="demand" label="需求数量"></el-table-column>
        <el-table-column label="本次计划产量">
          <template slot-scope="scope">
            <el-input
              v-model.number="scope.row.planned"
              size="small"
              @input="updatePlannedQuantity(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="workshop" label="车间">
          <template slot-scope="scope">
            <el-select v-model="scope.row.workshop" placeholder="选择车间" size="small">
              <el-option label="机械制造车间" value="机械制造车间"></el-option>
              <el-option label="组装车间" value="组装车间"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="line" label="生产线">
          <template slot-scope="scope">
            <el-select v-model="scope.row.line" placeholder="选择生产线" size="small">
              <el-option label="机械加工生产线A" value="机械加工生产线A"></el-option>
              <el-option label="机械加工生产线B" value="机械加工生产线B"></el-option>
              <el-option label="机械加工生产线C" value="机械加工生产线C"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="process" label="生产工艺">
          <template slot-scope="scope">
            <el-select v-model="scope.row.process" placeholder="选择生产工艺" size="small">
              <el-option label="焊接加工通用工艺" value="焊接加工通用工艺"></el-option>
              <el-option label="包装工艺010" value="包装工艺010"></el-option>
              <el-option label="清洗通用工艺2003" value="清洗通用工艺2003"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 底部按钮 -->
    <div class="bottom-buttons">
      <el-button type="primary" @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">生成计划</el-button>
    </div>
  </div>


</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          spec: '40mm', unit: '件', demand: 30, planned: 30,
          workshop: '机械制造车间', line: '机械加工生产线A', process: '焊接加工通用工艺'
        },
        {
          spec: '50mm', unit: '件', demand: 20, planned: 20,
          workshop: '组装车间', line: '机械加工生产线B', process: '包装工艺010'
        },
      ],
    }
  },
  methods: {
    submit(){

      this.$message("创建成功");
      location.href = '/qwer';
    },


    cancel() {
      console.log("取消");
      location.href = '/qwer';
    },

    updatePlannedQuantity(product) {
      console.log("更新产量：", product);
    },
  }
}
</script>

<style>
.bottom-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>





<!--<template>-->


<!--  <div class="app-container">-->



<!--    <div class="container">-->
<!--      <h1>生产订单信息</h1>-->
<!--      <div class="order-info" v-if="">-->
<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>生产订单编号：</label>GD20231002101-->

<!--        </el-row>-->

<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>订单来源：</label>系统新增-->

<!--        </el-row>-->

<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>交付日期：</label>2020/09/06-->

<!--        </el-row>-->


<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>创建时间：</label>2020/09/01 10:40-->

<!--        </el-row>-->

<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>创建人：</label>林敏儿-->

<!--        </el-row>-->

<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>客户名称：</label>广汇商贸-->

<!--        </el-row>-->

<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>最后更新人：</label>林敏儿-->

<!--        </el-row>-->

<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>销售单号：</label>PO20170725022-->

<!--        </el-row>-->

<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>备注：</label>-->

<!--        </el-row>-->

<!--        <el-row :gutter="10" width="100%" aria-setsize="10">-->
<!--          <label>最后更新时间：</label>2020/09/01 10:40-->

<!--        </el-row>-->
<!--      </div>-->
<!--    </div>-->




<!--    <el-table v-loading="loading" :data="mationList" @selection-change="handleSelectionChange">-->
<!--      <el-table-column type="selection" width="55" align="center" />-->
<!--      <el-table-column label="层级" align="center" prop="ductId" />-->
<!--      <el-table-column label="物料编码" align="center" prop="mater" />-->
<!--      <el-table-column label="物料名称" align="center" prop="rialname" />-->
<!--      <el-table-column label="物料类型" align="center" prop="rialtype" />-->
<!--      <el-table-column label="规格" align="center" prop="specification" />-->
<!--      <el-table-column label="计量单位" align="center" prop="unit" />-->
<!--      <el-table-column label="需求数量" align="center" prop="demand" />-->
<!--      <el-table-column label="本次计划产量" align="center" prop="doutput" />-->
<!--      <el-table-column label="车间" align="center" prop="shopId" />-->
<!--      <el-table-column label="生产线" align="center" prop="productId" />-->
<!--      <el-table-column label="生产工艺" align="center" prop="craftId" />-->
<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['order:mation:edit']"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['order:mation:remove']"-->
<!--          >删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->

<!--    &lt;!&ndash; 添加或修改生产计划产品信息对话框 &ndash;&gt;-->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="物料编码" prop="mater">-->
<!--          <el-input v-model="form.mater" placeholder="请输入物料编码" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="物料名称" prop="rialname">-->
<!--          <el-input v-model="form.rialname" placeholder="请输入物料名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="规格" prop="specification">-->
<!--          <el-input v-model="form.specification" placeholder="请输入规格" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="计量单位" prop="unit">-->
<!--          <el-input v-model="form.unit" placeholder="请输入计量单位" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="需求数量" prop="demand">-->
<!--          <el-input v-model="form.demand" placeholder="请输入需求数量" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="本次计划产量" prop="doutput">-->
<!--          <el-input v-model="form.doutput" placeholder="请输入本次计划产量" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="车间" prop="shopId">-->
<!--          <el-input v-model="form.shopId" placeholder="请输入车间" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="生产线" prop="productId">-->
<!--          <el-input v-model="form.productId" placeholder="请输入生产线" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="生产工艺" prop="craftId">-->
<!--          <el-input v-model="form.craftId" placeholder="请输入生产工艺" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { listMation, getMation, delMation, addMation, updateMation } from "@/api/order/mation";-->

<!--export default {-->
<!--  name: "Mation",-->
<!--  data() {-->
<!--    return {-->
<!--      // 遮罩层-->
<!--      loading: true,-->
<!--      // 选中数组-->
<!--      ids: [],-->
<!--      // 非单个禁用-->
<!--      single: true,-->
<!--      // 非多个禁用-->
<!--      multiple: true,-->
<!--      // 显示搜索条件-->
<!--      showSearch: true,-->
<!--      // 总条数-->
<!--      total: 0,-->
<!--      // 生产计划产品信息表格数据-->
<!--      mationList: [],-->
<!--      // 弹出层标题-->
<!--      title: "",-->
<!--      // 是否显示弹出层-->
<!--      open: false,-->
<!--      // 查询参数-->
<!--      queryParams: {-->
<!--        pageNum: 1,-->
<!--        pageSize: 10,-->
<!--        mater: null,-->
<!--        rialname: null,-->
<!--        rialtype: null,-->
<!--        specification: null,-->
<!--        unit: null,-->
<!--        demand: null,-->
<!--        doutput: null,-->
<!--        shopId: null,-->
<!--        productId: null,-->
<!--        craftId: null-->
<!--      },-->
<!--      // 表单参数-->
<!--      form: {},-->
<!--      // 表单校验-->
<!--      rules: {-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.getList();-->
<!--  },-->
<!--  methods: {-->
<!--    /** 查询生产计划产品信息列表 */-->
<!--    getList() {-->
<!--      this.loading = true;-->
<!--      listMation(this.queryParams).then(response => {-->
<!--        this.mationList = response.rows;-->
<!--        this.total = response.total;-->
<!--        this.loading = false;-->
<!--      });-->
<!--    },-->
<!--    // 取消按钮-->
<!--    cancel() {-->
<!--      this.open = false;-->
<!--      this.reset();-->
<!--    },-->
<!--    // 表单重置-->
<!--    reset() {-->
<!--      this.form = {-->
<!--        ductId: null,-->
<!--        mater: null,-->
<!--        rialname: null,-->
<!--        rialtype: null,-->
<!--        specification: null,-->
<!--        unit: null,-->
<!--        demand: null,-->
<!--        doutput: null,-->
<!--        shopId: null,-->
<!--        productId: null,-->
<!--        craftId: null-->
<!--      };-->
<!--      this.resetForm("form");-->
<!--    },-->
<!--    /** 搜索按钮操作 */-->
<!--    handleQuery() {-->
<!--      this.queryParams.pageNum = 1;-->
<!--      this.getList();-->
<!--    },-->
<!--    /** 重置按钮操作 */-->
<!--    resetQuery() {-->
<!--      this.resetForm("queryForm");-->
<!--      this.handleQuery();-->
<!--    },-->
<!--    // 多选框选中数据-->
<!--    handleSelectionChange(selection) {-->
<!--      this.ids = selection.map(item => item.ductId)-->
<!--      this.single = selection.length!==1-->
<!--      this.multiple = !selection.length-->
<!--    },-->
<!--    /** 新增按钮操作 */-->
<!--    handleAdd() {-->
<!--      this.reset();-->
<!--      this.open = true;-->
<!--      this.title = "添加生产计划产品信息";-->
<!--    },-->
<!--    /** 修改按钮操作 */-->
<!--    handleUpdate(row) {-->
<!--      this.reset();-->
<!--      const ductId = row.ductId || this.ids-->
<!--      getMation(ductId).then(response => {-->
<!--        this.form = response.data;-->
<!--        this.open = true;-->
<!--        this.title = "修改生产计划产品信息";-->
<!--      });-->
<!--    },-->
<!--    /** 提交按钮 */-->
<!--    submitForm() {-->
<!--      this.$refs["form"].validate(valid => {-->
<!--        if (valid) {-->
<!--          if (this.form.ductId != null) {-->
<!--            updateMation(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("修改成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          } else {-->
<!--            addMation(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("新增成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    /** 删除按钮操作 */-->
<!--    handleDelete(row) {-->
<!--      const ductIds = row.ductId || this.ids;-->
<!--      this.$modal.confirm('是否确认删除生产计划产品信息编号为"' + ductIds + '"的数据项？').then(function() {-->
<!--        return delMation(ductIds);-->
<!--      }).then(() => {-->
<!--        this.getList();-->
<!--        this.$modal.msgSuccess("删除成功");-->
<!--      }).catch(() => {});-->
<!--    },-->
<!--    /** 导出按钮操作 */-->
<!--    handleExport() {-->
<!--      this.download('order/mation/export', {-->
<!--        ...this.queryParams-->
<!--      }, `mation_${new Date().getTime()}.xlsx`)-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->


<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--<title>生产订单详情</title>-->
<!--<style>-->
<!--  body {-->
<!--    font-family: Arial, sans-serif;-->
<!--  }-->

<!--  .container {-->
<!--    max-width: 800px;-->
<!--    margin: 0 auto;-->
<!--    padding: 20px;-->
<!--  }-->

<!--  .order-info {-->
<!--    border: 1px solid #ccc;-->
<!--    padding: 10px;-->
<!--  }-->

<!--  .order-info label {-->
<!--    font-weight: bold;-->
<!--  }-->
<!--</style>-->
<!--</head>-->
